<script setup>
import productionBoard1v2 from "@/views/visual/modules/productionBoard1v2.vue";
import { getAllMachine } from "@/api/pannel/machinePannel.js";
import { ref } from "vue";
import moment from "moment";

const updateTime = ref("");
const timer = ref();
const key = ref(0);
const time = ref(300);

const props = defineProps({
  topic: {
    type: Boolean,
    default: false,
  },
  gxmc: {
    type: String,
    default: "",
  },
  scdw: {
    type: String,
    default: "",
  },
});
// 自动更新时间五分钟
const updateData = () => {
  timer.value = setInterval(() => {
    if (time.value > 0) {
      time.value--;
      const duration = moment.duration(time.value * 1000); // 转换为毫秒

      const minutes = duration.asMinutes(); // 总分钟数（包含小数部分）
      const wholeMinutes = Math.floor(minutes); // 取整得到分钟数
      const remainingSeconds = Math.round((minutes - wholeMinutes) * 60); // 计算剩余的秒数
      updateTime.value = `${wholeMinutes}分${remainingSeconds}秒`;
    } else {
      time.value = 300;
      key.value++;
    }
  }, 1000);
};

const list = ref([
  {
    value: 0,
    status: "设备",
    color: "#ccc",
    border: "1px solid #ccc",
  },
  {
    value: 0,
    status: "开机",
    color: "#9acd31",
    border: "1px solid #9acd31",
  },
  {
    value: 0,
    status: "调机",
    color: "blue",
    border: "1px solid blue",
  },
  {
    value: 0,
    status: "停机",
    color: "red",
    border: "1px solid red",
  },
]);

const loadData = async () => {
  list.value[1].value = 0;
  list.value[2].value = 0;
  list.value[3].value = 0;
  let { data, machines } = await getAllMachine();
  if (props.topic) {
    machines = machines.filter((item) => item.topic);
  }
  if (props.gxmc !== "") {
    machines = machines.filter((item) => item.gxmc === props.gxmc);
  }

  if (props.scdw !== "") {
    machines = machines.filter((item) => item.scdw === props.scdw);
  }

  list.value[0].value = machines.length;

  if (props.topic) {
    machines.forEach((item) => {
      if (item.zt === "生产中") {
        list.value[1].value = list.value[1].value + 1;
      } else if (item.zt === "未开工") {
        list.value[3].value = list.value[3].value + 1;
      } else {
        list.value[2].value = list.value[2].value + 1;
      }
    });
  } else {
    machines.forEach((item) => {
      if (item.zt === "生产中") {
        list.value[1].value = list.value[1].value + 1;
      } else if (item.zt === "未开工") {
        list.value[3].value = list.value[3].value + 1;
      } else {
        list.value[2].value = list.value[2].value + 1;
      }
    });
  }
};

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++;
    }, 100);
  });
};

onMounted(updateData);
onUnmounted(() => {
  timer.value && clearInterval(timer.value);
});
onMounted(loadData);

onMounted(() => {
  window.addEventListener("resize", keyResize);
});

onUnmounted(() => {
  window.removeEventListener("resize", keyResize);
});
watch(
  () => [props.gxmc, props.scdw], // 使用正确的变量名props
  async (newValues, oldValues) => {
    if (newValues !== oldValues || newValues !== oldValues) {
      await loadData();
    }
  },
  { immediate: true }
);
</script>

<template>
  <div class="ps_w_h_100">
    <div class="left ps_h_100">
      <dv-border-box13 style="padding: 20px">
        <div style="height: 50%">
          <div class="board-title" style="color: #fff">设备状态</div>
          <div
            style="
              display: flex;
              gap: 10px;
              flex-wrap: wrap;
              justify-content: space-around;
              align-items: center;
              height: 100%;
              width: 100%;
              padding: 0 20px 0 20px;
            "
          >
            <template v-for="(item, index) in list" :key="index">
              <div
                v-if="!props.topic && index !== 2"
                style="align-items: center; text-align: center"
              >
                <div style="display: flex; align-items: center">
                  <div
                    style="height: 10px; width: 10px; border-radius: 50%"
                    :style="{
                      backgroundColor: item.color,
                      border: item.border,
                    }"
                  ></div>
                  <div style="color: #fff">{{ item.status }}</div>
                </div>
                <div
                  style="color: aliceblue; font-size: 20px; font-weight: bolder"
                  v-if="!props.topic && index !== 2"
                >
                  {{ item.value }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <div style="height: 50%; width: 100%">
          <productionBoard1v2 :key="key"></productionBoard1v2>
        </div>
      </dv-border-box13>
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.left .content) {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
